<template>
  <div>
    <el-row>
      <el-col>
        <div id="pieid" :style="{width: '100%', height: '384px'}">
          <div class="stripe">
            <div class="green"><p><span>院内影响力</span><span>54.6%</span></p></div>
          </div>
          <div class="stripe">
            <div class="blue"><p><span>机构影响力</span><span>56.7%</span></p></div>
          </div>
          <div class="stripe">
            <div class="yellow"><p><span>院外影响力</span><span>45.86%</span></p></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>
  .stripe{
    background-color: rgba(0,0,0,.5);
    margin-bottom: 15px;
    border-radius: 5px;
  }
  .green{
    height: 35px;
    border-radius: 5px;
    background: #90b900;
    width: 50%;
  }
  .green>p{
    line-height: 35px;
  }
  .green>p>span{
    padding: 0 10px;
  }

  .blue{
    height: 35px;
    border-radius: 5px;
    background: #2dacd1;
    width: 45%;
  }
  .blue>p{
    line-height: 35px;
  }
  .blue>p>span{
    padding: 0 10px;
  }

  .yellow{
    height: 35px;
    border-radius: 5px;
    background: #dfb81c;
    width: 55%;
  }
  .yellow>p{
    line-height: 35px;
  }
  .yellow>p>span{
    padding: 0 10px;
  }
</style>
